<template>
  <a-flex
    v-for="x in lstLimits"
    v-bind:key="x.key"
    gap="small"
    style="margin-top: 8px"
  >
    <a-select v-model:value="x.T" style="width: 200px">
      <a-select-option
        v-for="item in appStore.aryVisitLimitType"
        :key="item.key"
        :value="item.key"
        >{{ item.label }}
      </a-select-option>
    </a-select>
    <a-select v-model:value="x.ids" mode="multiple" style="width: 100%">
      <a-select-option
        v-for="field in lstField"
        :key="field.id"
        :value="field.id"
        >{{ field.label }}({{ field.fieldTypeLabel }})</a-select-option
      >
    </a-select>
    <a-button type="link" danger @click="removeItem(x)"
      ><DeleteOutlined></DeleteOutlined
    ></a-button>
  </a-flex>
  <a-button v-if="state.editMode == 0" type="link" @click="addItem"
    >增加规则</a-button
  >
</template>
<script setup>
import { reactive, computed } from "vue";
import CommonDefine from "@/component/CommonDefine";
import { DeleteOutlined } from "@ant-design/icons-vue";

const props = defineProps({ model: Object });
const appStore = CommonDefine.appStore();
const lstLimits = reactive([]);
const state = reactive({
  editMode: 0,
});
const addItem = () => {
  let srf = { key: "限制" + (lstLimits.length + 1), T: "", ids: [] };
  lstLimits.push(srf);
};

const removeItem = (item) => {
  lstLimits.forEach((x, index) => {
    if (x.key == item.key) {
      lstLimits.splice(index, 1);
    }
  });
};

const setRules = (limits) => {
  CommonDefine.clearArray(lstLimits);
  if (limits) {
    limits.forEach((x) => {
      x.key = "限制" + (lstLimits.length + 1);
      x.ids = x.C;
      lstLimits.push(x);
    });
  }
};

const getRules = () => {
  return lstLimits;
};

const lstField = computed(() => {
  let ary = [];
  CommonDefine.runWithFieldCache(props.model.id, (fields) => {
    fields.forEach((fd) => {
      fd.key = fd.id;
      fd.fieldTypeLabel = appStore.aryFieldType.find(
        (x) => x.key == fd.fieldType.T
      ).label;
      ary.push(fd);
    });
  });
  return ary;
});

defineExpose({ setRules, getRules });
</script>
